<template>
  <view class="page-main" @click="allClick">
    <view class="header">
      <view class="back" @click="goBack">
        <van-icon name="arrow-left" color="#157ef9" />
        <text>返回</text>
      </view>
      <view class="title">收入纳税明细</view>
      <view class="handle" @click="batchAppeal">批量申诉</view>
    </view>
    <view class="cell-group-box">
      <view class="cell-group">
        <view class="cell">
          <view class="cell-left">
            <span class="label">收入合计</span>
            <span class="tip">
              <van-icon name="question-o" color="#157ef9" @click.stop="showPopoverClick" />
              <span class="tip-text" v-if="showPopover">针对所得项目小类为个人股权激励收入的，仅统计全年最后一次有效申报中所填写的收入</span>
            </span>
            <span>：</span>
          </view>
          <view class="cell-right">123233.32元</view>
        </view>
        <view class="cell">
          <view class="cell-left">
            <span class="label">已申报税额合计</span>
            <span>：</span>
          </view>
          <view class="cell-right">123233.32元</view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="list-item" v-for="item in 12" :key="item" @click="goDetail">
        <view class="list-header">
          <text>工资薪金</text>
          <text>2023-12</text>
        </view>
        <view class="subclass format-one">
          所得项目小类：正常工资薪金
        </view>
        <view class="obligor">
          <view class="obligor-left">
            <text>扣缴义务人：</text>
            <text class="company">北京中软国际科技服务有限公司</text>
          </view>
          <van-icon name="arrow" color="#d5d5d5" size="18" />
        </view>
        <view class="income format-one">收入：1900000000.00元</view>
        <view class="declared format-one">已申报税额：1900000000.00元</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant';
const goBack = () => {
  uni.redirectTo({
    url: "/pages/detail/search"
  })
}
const batchAppeal = () => {
  showToast({
    message: '批量申诉',
    icon: 'like-o',
  });
}
const showPopover = ref(false)
const showPopoverClick = () => {
  showPopover.value = !showPopover.value
}
const allClick = () => {
  if (showPopover.value) {
    showPopover.value = false
  }
}
const goDetail = () => {
  uni.navigateTo({ url: "/pages/detail/detail" })
}

</script>

<style scoped lang="scss">
.page-main {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
}

.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  height: 88rpx;
  z-index: 999;

  .back {
    display: flex;
    align-items: center;

    text {
      font-size: 28rpx;
      color: #157ef9;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
  }

  .handle {
    font-size: 28rpx;
    color: #157ef9;
  }
}

.cell-group-box {
  width: 100%;
  position: fixed;
  top: 88rpx;
  z-index: 999;
  padding-top: 20rpx;
  background-color: #f6f7f9;

  .cell-group {
    width: 100%;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    background-color: #fff;

    .cell {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0rpx;
      border-bottom: 2rpx solid #f3f4f6;
      font-size: 28rpx;

      &:last-child {
        border-bottom: none;
      }

      .tip {
        position: relative;
        margin: 0 10rpx;

        .tip-text {
          width: 550rpx;
          position: absolute;
          left: -50rpx;
          top: 60rpx;
          font-size: 24rpx;
          padding: 16rpx;
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: 0 2rpx 12rpx rgba(50, 50, 51, .12);

          &::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 46rpx;
            top: -12rpx;
            border-style: solid;
            border-width: 16rpx;
            border-color: transparent transparent #fff #fff;
            transform: rotate(135deg);
            box-shadow: -2rpx 2rpx 4rpx 0 rgba(50, 50, 51, .12);
          }
        }
      }
    }
  }
}


.main {
  position: relative;
  top: 270rpx;

  .list-item {
    width: 100%;
    padding: 0rpx 32rpx 30rpx 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;

    .list-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 60rpx 26rpx 0rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      line-height: 32rpx;
      color: #000;
    }

    .format-one {
      font-size: 28rpx;
      line-height: 28rpx;
      margin-bottom: 20rpx;
      color: #99989e;
    }

    .obligor {
      font-size: 28rpx;
      line-height: 28rpx;
      margin-bottom: 20rpx;
      color: #99989e;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .obligor-left {
        display: flex;
        align-items: center;

        .company {
          display: inline-block;
          width: 360rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>